<template>
  <div class="container-index">
    <!-- 表头 -->
    <div class="title">
      <div style="display: flex;width: 40%">
        <img :src="mainIco" class="title-img" alt=""/>
        <div class="title-msg"  @click="selectStatus='epipara'" >EPIPARA</div>
      </div>
      <div style="display: flex; justify-content: flex-end;width: 56%">
        <div class="title-msg-home" @click="selectStatus='epipara'" >Home</div>
        <div class="title-msg-search" @click="selectStatus='home'" >Genome View</div>
        <div class="title-msg-search" @click="clickSearch">Search</div>
        <div class="title-msg-help" @click="selectStatus='help'">Help</div>
        <div class="title-msg-contact" @click="selectStatus='contactUs'">Contact Us</div>
      </div>
    </div>
    <!-- 首页 -->
    <div v-if="selectStatus === 'epipara'">
      <Epipara></Epipara>
      <HomeFooter></HomeFooter>
    </div>
    <!-- home页 -->
    <div v-if="selectStatus === 'home'">
      <Home></Home>
      <HomeFooter></HomeFooter>
    </div>
    <!-- search页 -->
    <div v-if="selectStatus === 'search'">
      <Search></Search>
      <HomeFooter></HomeFooter>
    </div>
    <!-- help页 -->
    <div v-if="selectStatus === 'help'">
      <Help></Help>
      <HomeFooter></HomeFooter>
    </div>
    <!-- contact us页 -->
    <div v-if="selectStatus === 'contactUs'">
      <ContactUs></ContactUs>
      <HomeFooter></HomeFooter>
    </div>
  </div>
</template>

<script>
  import Home from './buss/home/home';
  import HomeFooter from './buss/home/footer';
  import Footer from './buss/footer/footer';
  import ContactUs from './buss/contactus/contactus';
  import Search from './buss/search/search';
  import Help from './buss/help/help';
  import Epipara from './buss/epipara/epipara';

  export default {
    components: {
      Home,
      HomeFooter,
      ContactUs,
      Search,
      Help,
      Footer,
      Epipara
    },
    data() {
      return {
        //图片
        mainIco:require('../assets/images/icon.png'),

        //home页面
        selectStatus: 'epipara',
        footers: [
          {
            date: '2022-10',
            msg: 'Improved display on mobile Uodating Arabidopsis data toa add support for non-coding RNAs'
          },
          {
            date: '2022-10',
            msg: 'Improved display on mobile Uodating Arabido'
          },
          {
            date: '2022-10',
            msg: 'Improved display on mobile Uodating Arabidopsis data toa add support for non-coding RNAs'
          },
          {
            date: '2022-10',
            msg: 'Improved display on mobile Uodating Arabidop'
          },
          {
            date: '2022-10',
            msg: 'Improved display on mobile Uodating Arabido'
          }
        ]
      }
    },
    created() {
      let selectStatus = this.$route.query.selectStatus
      console.log(selectStatus)
      if(selectStatus){
        
        this.selectStatus=selectStatus;
      }
      
    },
    methods: {
      // 移入
      mouseOver() {
        this.active = "background-color:black";
        // 操作dom 获取p标签改变其样式
        var acps = this.$refs.acp
        acps.style.color = "red"
      },
      // 移出
      mouseLeave() {
        this.active = "";
        this.$refs.acp.style=''
      },
      clickSearch(){
        location.reload()
        window.location.href = "/home#/index?selectStatus=search";
        this.selectStatus='search';
      }
    }
  }

</script>

<style rel="stylesheet/scss" lang="scss">
  .el-header {
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }

  .title {
    display: flex;
    height: 80px;
    width: 100%;
    background-color: #657c9c;
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    cursor: pointer;
  }

  .title-img {
    margin-left: 20px;
    margin-top: 5px;
    height: 70px;
    width: 75px;
  }

  .title-msg {
    margin-top: 10px;
    margin-left: 30px;
    cursor: pointer;
    font-size: 45px;
  }

  .title-msg-home {
    margin-top: 26px;
    font-size: 26px;
  }

  .title-msg-search {
    margin-top: 26px;
    margin-left: 40px;
    font-size: 26px;
  }

  .title-msg-help {
    margin-top: 26px;
    margin-left: 40px;
    font-size: 26px;
  }

  .title-msg-home,.title-msg-help,.title-msg-search,.title-msg-contact:hover {
    cursor: hand;
  }

  .title-msg-contact {
    margin-top: 26px;
    margin-left: 40px;
    font-size: 26px;
  }
</style>
